<template>
  <v-list-item three-line class="mb-2 white">
    <v-list-item-avatar size="55">
      <v-img class="can_click" :src="relation.avatar" @click="jumpUser(relation.userId)"></v-img>
    </v-list-item-avatar>
    <v-list-item-content>
      <v-list-item-title class="font-weight-black can_click" @click="jumpUser(relation.userId)">{{relation.uname}}</v-list-item-title>
      <v-list-item-subtitle class="text-overline grey--text">{{relation.introduction}}</v-list-item-subtitle>
    </v-list-item-content>
    
    <v-list-item-action>
        <v-btn outlined rounded @click="toFollow(relation)">{{relation.isFollow?'已关注':'未关注'}}</v-btn>
    </v-list-item-action>
  </v-list-item>
</template>

<script>
// 调用 this.$emit('queryRelation'); 刷新
export default {
  name: 'MyRelation',
  props: ['relation'],
  methods:{
    // 关注请求
    toFollow(relation){
      this.$utils.toFollow(this, relation.userId, relation.isFollow, ()=>{
        relation.isFollow = !relation.isFollow
        this.$emit('queryRelation');
      })
    },
    jumpUser(uid){
      this.$utils.jumpUser(this, uid)
    }
  }
}
</script>

<style scoped>
.can_click{
  cursor: pointer;
}
</style>